<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的</title>
    <!-- 引入样式-->
    <link href="../imgs/2.jpeg" type="image/x-icon" rel="icon">
    <link rel="stylesheet" href="../js/element-ui/index.css">
    <!-- 引入js-->
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/http.js"></script>
    <script src="../js/element-ui/index.js"></script>
    <style>
        body{
            background: #f2f6fc;
            background-size: 100%;
        }
        .input{
            width: 250px;
        }
    </style>
</head>
<body>
<div id="app">
    <br><br><br><br><br><br><br><br>
    <div align="center">
    <el-input v-model="user.nickName" placeholder="请输入昵称" class="input"></el-input><br><br>
    <el-input v-model="user.likeBook" placeholder="请输入最喜欢的书" class="input"></el-input><br><br><br><br>
    <el-button type="primary" @click="update">保存</el-button>
        <el-button type="primary" @click="openDialog">修改密码</el-button>
    </div>

    <el-dialog
            title="用户校验"
            :visible.sync="dialogVisible"
            width="30%">
        <center>
        <el-input v-model="validateCode" placeholder="请输入验证码" class="input"></el-input>
        </center>
        <br><br>
        <center>
        <el-button type="primary" @click="sendEMail" id="b1">发送</el-button>
        <el-button type="primary" @click="checkValidateCode">校验</el-button></center>
    </el-dialog>
    <el-dialog
            title="修改密码"
            :visible.sync="passwordDialogVisible"
            width="30%">
        <center>
        <el-input placeholder="请输入密码" v-model="password" class="input"></el-input>
        </center>
        <br><br>
        <center>
        <el-button type="primary" @click="updatePassword">提交</el-button>
        <el-button type="primary" @click="deleteUser">注销账号</el-button>
        </center>
    </el-dialog>
</div>

<script>
    let trueValidateCode=666666;
    let vue=new Vue({
        el:"#app",
        data:{
            user:{},
            dialogVisible:false,
            passwordDialogVisible:false,
            validateCode:undefined,
            password:"",
        },
        created(){
            let username = localStorage.getItem("user");
            this.initUser(username);
        },
        methods:{
            initUser(username){
                http.get("/user?username="+username).then(res=>{
                    this.user=res.data;
                });
            },
            openDialog(){
                this.dialogVisible=true;
            },
            sendEMail(){
                let b1 = document.getElementById("b1");
                b1.disabled=true;
                let i=60;
                let interval = setInterval(function () {
                    i--;
                    if (i<=0){
                        clearInterval(interval);
                        b1.disabled=false;
                        vue.buttonName="发送";
                        return false;
                    }
                    vue.buttonName=i+"秒";
                },1000);
                http.get("/user/getEMail").then(res=>{
                    http.get("/user/sendEMail?eMail="+res.data).then(res=>{
                        trueValidateCode=res.data;
                        this.$message.success(res.message);
                    });
                });
            },
            checkValidateCode(){
                if (parseInt(trueValidateCode)==parseInt(this.validateCode)){
                    this.dialogVisible=false;
                    this.password=this.user.password;
                    this.passwordDialogVisible=true;
                }else {
                    this.$message.error("验证码错误");
                }
            },
            updatePassword(){
                if (this.password==""){
                    this.$message.error("密码不能为空");
                    return;
                }
                let param={
                    password:this.password
                }
                http.put("/user/updatePassword",param).then(res=>{
                    this.$message.success(res.message);
                    this.passwordDialogVisible=false;
                });
            },
            update(){
                http.put("/user",this.user).then(res=>{
                    this.$message.success(res.message);
                });
            },
            deleteUser(){
                this.$confirm('你确定注销此用户吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    http.delete("/user").then(res=>{
                        this.$message.success(res.message);
                        setTimeout(function () {
                            window.location.href="login.html";
                        },3000);
                    });
                }).catch(() => {
                    this.$message('已取消注销');
                });
            }
        }
    });
</script>
</body>
</html>